<template>
  <div style="display: flex;">
    <a-layout-sider
      :class="['sider', isDesktop() ? null : 'shadow', theme, fixSiderbar ? 'ant-fixed-sidemenu' : null]"
      width="220px" :collapsible="collapsible" v-model="collapsed" :trigger="null">
      <logo/>
      <div>
        <div v-for="(item, index) in menuList" :key="item.id" class="menu-item"
             @click="chooseMenus(item, index)">
          <a-icon :type="item.meta.icon" class="menu-item-icon" style="line-height: 44px; fontSize: 16px">
          </a-icon>
          <div class="menu-item-title">{{ item.meta.title }}</div>
        </div>
      </div>
    </a-layout-sider>
    <div style="background-color: #f5f5f5; width: 200px; text-align: center; height:100vh; overflow:auto"
         v-if="subMenus.length > 0">
      <div style="height: 62px; background-color: #FFFFFF;"></div>
      <div style="padding: 5px 0;">
        <div v-for="(item, index) in subMenus" :key="index" class="sub-menu-item"
             @click="toRouteLink(item, index)">
          <div style="width: 15px;"></div>
          <!-- <a-icon :type="item.meta.icon" class="menu-item-icon" style="font-size: 16px; margin: 0 15px; line-height: 43px;"></a-icon> -->
          <div>{{ item.meta.title }}</div>
        </div>
      </div>
      <!-- <s-menu :collapsed="collapsed" :menu="subMenus" :mode="mode" @select="onSelect"
        style="padding: 16px 0px;height: calc(100vh - 68px); width: 200px;margin-top: 68px;background-color: ivory;"></s-menu> -->
    </div>
  </div>
  <!-- <a-layout-sider
    :class="['sider', isDesktop() ? null : 'shadow', theme, fixSiderbar ? 'ant-fixed-sidemenu' : null ]"
    width="256px"
    :collapsible="collapsible"
    v-model="collapsed"
    :trigger="null">
    <logo />
    <s-menu
      :collapsed="collapsed"
      :menu="menus"
      :theme="theme"
      :mode="mode"
      @select="onSelect"
      style="padding: 16px 0px;"></s-menu>
  </a-layout-sider> -->
</template>

<script>
import Logo from '@/components/tools/Logo'
import SMenu from './index'
import {
  mixin,
  mixinDevice
} from '@/utils/mixin'

export default {
  name: 'SideMenu',
  components: {
    Logo,
    SMenu
  },
  mixins: [mixin, mixinDevice],
  props: {
    mode: {
      type: String,
      required: false,
      default: 'inline'
    },
    theme: {
      type: String,
      required: false,
      default: 'dark'
    },
    collapsible: {
      type: Boolean,
      required: false,
      default: false
    },
    collapsed: {
      type: Boolean,
      required: false,
      default: false
    },
    
    menus: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      menuList: [],
      subMenus: [],
      locationUrl: ''
    }
  },
  mounted() {
    let that = this;
    let path = window.location.hash ? window.location.hash.split('/')[window.location.hash.split('/').length - 1] : ''
    path = path ? path.split('?')[0] : ''
    path = '/' + path
    console.log(path)
    this.menuList = this.menus.filter(item => {
      return !item.hidden
    })
    this.menuList.forEach((item, index) => {
      if (item.children && item.children.length > 0) {
        item.children.forEach((cItem, cIndex) => {
          if (cItem.path == path) {
            that.subMenus = item.children.filter(cd => {
              return !cd.hidden
            })
            setTimeout(function () {
              that.setFirstMenus(item, index)
            }, 300)
            setTimeout(function () {
              that.setSecondMenus(cItem, cIndex)
            }, 700)
          }
        })
      } else if (path == item.path) {
        setTimeout(function () {
          that.setFirstMenus(item, index)
        }, 300)
      }
    })
  },
  // watch: {
  // 	$route(to, from) {
  // 		this.initSubMenusList()
  // 	}
  // },
  methods: {
    initSubMenusList() {
      let that = this;
      let path = window.location.hash ? window.location.hash.split('#')[window.location.hash.split('#').length - 1] : ''
      path = path ? path.split('?')[0] : ''
      this.menuList = this.menus.filter(item => {
        return !item.hidden
      })
      
      this.menuList.forEach((item, index) => {
        if (item.children && item.children.length > 0) {
          item.children.forEach((cItem, cIndex) => {
            console.log(cItem)
            if (cItem.path.indexOf(path) != -1) {
              that.subMenus = item.children.filter(cd => {
                return !cd.hidden
              })
              setTimeout(function () {
                that.setFirstMenus(item, index)
              }, 300)
              setTimeout(function () {
                that.setSecondMenus(cItem, cIndex)
              }, 700)
              return
            }
          })
        } else if (item.path.indexOf(path) != -1) {
          setTimeout(function () {
            that.setFirstMenus(item, index)
          }, 300)
          return
        }
      })
    },
    
    onSelect(obj) {
      this.$emit('menuSelect', obj)
    },
    
    chooseMenus(item, index) {
      let that = this;
      if (item.children) {
        this.subMenus = item.children
        this.subMenus = this.subMenus.filter(cItem => {
          return !cItem.hidden
        })
        console.log(this.subMenus)
        setTimeout(function () {
          if (that.subMenus.length > 0) {
            that.toRouteLink(that.subMenus[0], 0)
          } else {
            that.setSecondMenus("", "")
          }
        }, 200)
      } else {
        this.$router.push({name: item.name})
        this.subMenus = []
      }
      that.setFirstMenus(item, index)
    },
    
    setFirstMenus(item, index) {
      let that = this;
      let list = Array.from(document.getElementsByClassName("menu-item"))
      list.forEach((cItem, cIndex) => {
        list[cIndex].classList.remove("menu-item-active")
      })
      list.forEach((cItem, cIndex) => {
        if (that.menuList[cIndex].meta.title == item.meta.title) {
          list[cIndex].classList.add("menu-item-active")
        }
      })
    },
    
    toRouteLink(item, index) {
      console.log(item)
      this.$router.push({name: item.name})
      this.setSecondMenus(item, index)
      
    },
    
    setSecondMenus(item, index) {
      let that = this;
      let list = Array.from(document.getElementsByClassName("sub-menu-item"))
      list.forEach((cItem, cIndex) => {
        list[cIndex].classList.remove("sub-menu-item-active")
      })
      list.forEach((cItem, cIndex) => {
        if (that.subMenus[cIndex].meta.title == item.meta.title) {
          list[cIndex].classList.add("sub-menu-item-active")
        }
      })
    }
  }
}
</script>
<style>
.menu-item {
  display: flex;
  color: rgba(255, 255, 255, 0.5);
  height: 50px;
  line-height: 50px;
  box-sizing: border-box;
  padding: 0 18px;
}

.menu-item-icon {
  font-size: 14px;
  color: #F0F0F0;
}

.menu-item:hover {
  color: rgba(255, 255, 255, 1);
  cursor: pointer;
}

.menu-item-title {
  margin-left: 20px;
}

.menu-item-active {
  background-color: #1890FF;
  color: rgba(255, 255, 255, 1);
}

.sub-menu-item {
  height: 50px;
  line-height: 50px;
  color: #333;
  cursor: pointer;
  display: flex;
}

.sub-menu-item-active {
  background-color: #FFFFFF;
  color: #1890FF;
  /* box-shadow: 5px 0 5px #ccc; */
}
</style>
